<template>
	<div class="goods_list table-theme">
		<head-title title="商品--套餐列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view 
						:option-list="saleList" 
						:value="is_sale" 
						placeholder="状态"
						type="is_sale"
						label-name="sale_name"
						value-name="sale_id"
						@value="setSelectValue">
					</select-view>
					<select-view 
						:option-list="typeList" 
						:value="is_house" 
						placeholder="套餐类型"
						type="is_house"
						label-name="type_name"
						value-name="type_id"
						@value="setSelectValue"
						v-if="admin_id!=3">
					</select-view>
					<select-view 
						:option-list="styleList" 
						:value="style_id" 
						placeholder="风格分类"
						type="style_id"
						label-name="style_name"
						value-name="style_id"
						@value="setSelectValue">
					</select-view>
					<select-view 
						:option-list="spaceList" 
						:value="space_id" 
						placeholder="状态"
						type="space_id"
						label-name="space_name"
						value-name="space_id"
						@value="setSelectValue">
					</select-view>
					<select-view 
						:option-list="levelList" 
						:value="level_id" 
						placeholder="套餐价格"
						type="level_id"
						label-name="label_name"
						value-name="level_id"
						@value="setSelectValue"
						v-if="is_house != 3">
					</select-view>
					<select-view 
						:option-list="customizedList" 
						:value="is_customized" 
						placeholder="是否定制"
						type="is_customized"
						@value="setSelectValue">
					</select-view>
					<select-view 
						:option-list="paramterList" 
						:value="paramter" 
						placeholder="是否包含下架商品"
						type="paramter"
						@value="setSelectValue">
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
				</div>
			</div>
			<div class="btn-group">
				<div class="btn-item" v-if="is_sale==2">
					<el-button type="primary" size="small" @click="upDown(1)">批量上架</el-button>
				</div>
				<div class="btn-item" v-else>
					<el-button type="primary" size="small" @click="upDown(2)">批量下架</el-button>
				</div>
				<div class="btn-item">
					<el-button type="danger" size="small" @click="del(1)">批量删除</el-button>
				</div>
			</div>
			<p class="data-number">总商品数：{{ total }}</p>
			<el-table :data="goodsList" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column label="序号" align="center" prop="group_id" width="110"></el-table-column>
				<el-table-column label="名称" align="center" prop="group_name"></el-table-column>
				<el-table-column label="类型" align="center" width="50">
					<template slot-scope="scope">
						<span v-if="scope.row.is_house==1">N98套餐</span>
						<span v-if="scope.row.is_house==2">全屋套餐</span>
						<span v-if="scope.row.is_house==3">特价套餐</span>
					</template>
				</el-table-column>
				<el-table-column label="编号" align="center" prop="group_sn" width="200"></el-table-column>
				<el-table-column label="空间" align="center" prop="space_name" width="100"></el-table-column>
				<el-table-column label="风格" align="center" prop="style_name" width="200"></el-table-column>
				<el-table-column label="零售价" align="center" width="200">
					<template slot-scope="scope">￥{{scope.row.retail_price}}</template>
				</el-table-column>
				<el-table-column label="主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image_middle"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center" width="110">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_sale" :active-value="1" :inactive-value="2" @change="upDown(0, $event, scope.row.group_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="下架备注" align="center" prop="group_remarks"></el-table-column>
				<el-table-column label="排序" align="center" prop="" width="100">
					<template slot-scope="scope">
						<el-input v-model="scope.row.sort" placeholder="" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
						 @keyup.enter.native="postSort(scope.row.sort, scope.row.group_id)" @blur="postSort(scope.row.sort, scope.row.group_id)"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="是否有下架产品" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.goods_sale == 1" style="color:red">是</span>
						<span v-else>否</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button icon="el-icon-arrow-up" circle size="mini" @click="setSort(0,scope.row.sort, scope.row.group_id)"></el-button>
						<el-button icon="el-icon-arrow-down" circle size="mini" @click="setSort(1,scope.row.sort, scope.row.group_id)"></el-button>
						<el-button type="primary" size="mini" @click="edit_package(scope.row.is_house,scope.row.group_id,scope.row.is_examine)">编辑</el-button>
						<el-button type="primary" size="mini" @click="getQrCode(scope.row.group_id)" v-if="scope.row.is_examine!=1">生成二维码</el-button> 
						<el-button type="primary" size="mini" @click="exportExcel(scope.row.group_id)" v-if="scope.row.is_house==2">导出</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>

		<el-dialog title="" :visible.sync="qrQialog" center :modal-append-to-body="false" width="300px">
			<el-image style="width: 100%; height: 100%" :src="qrCodeUrl"></el-image>
		</el-dialog>
		<el-dialog title="下架备注" :close-on-click-modal="false" :visible.sync="remarkDialogVisible" center :modal-append-to-body="false" width="480px" @closed="onCloseRemark">
			<el-form :model="upDownForm" :rules="upDownFormRules" ref="upDownForm" label-width="100px">
				<el-form-item label="备注：" prop="group_remarks">
					<el-input v-model="upDownForm.group_remarks"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="onCloseRemark">取 消</el-button>
				<el-button type="primary" @click="submitUpDowmForm('upDownForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from '@/components/SelectView';
	export default {
		name: 'package_list',
		components: {
			ImgPopover,
			SelectView
		},
		data() {
			return {
				qrQialog: false,
				qrCodeUrl: '',
				goodsListType: 0,
				admin_id: localStorage.getItem('admin_id'),
				goodsList: [], // 商品列表
				total: 0,
				totalData: 0, // 数据总数
				style_id: '', // 风格
				space_id: '', // 空间
				is_house: '', // 类型
				is_sale: '1', // 上下架
				level_id:'',//价格
				page: 0,
				saleList: [{
					sale_id: '1',
					sale_name: '上架'
				}, {
					sale_id: '2',
					sale_name: '下架'
				}],
				typeList: [
					{
						type_id: 0,
						type_name: '全部类型'
					},
					{
						type_id: 1,
						type_name: 'N98'
					},
					{
						type_id: 2,
						type_name: '全屋'
					},
					{
						type_id: 3,
						type_name: '特价套餐'
					}
				],
				styleList: [],
				spaceList: [],
				multipleSelection: [],
				levelList:[],
				customizedList: [
					{
							value: '',
							label: '请选择'
						},
					{
						value: 0,
						label: '非定制商品'
					},
					{
						value: 1,
						label: '定制商品'
					}
				],
				is_customized: 0,
				paramterList:[
					{
						value:0,
						label:'不开启下架产品筛选'
					},
					{
						value:1,
						label:'开启下架产品筛选'
					}
				],
				paramter:0,
				searchOption: [
					{
						value: 0,
						label: "套餐ID",
					},
					{
						value: 1,
						label: "套餐编码",
					},
					{
						value: 2,
						label: "套餐名称",
					},
				],
				classSelect: 0,
				selectContent: "",
				remarkDialogVisible:false,
				upDownForm:{
					group_remarks:'',
					is_sale:'',
					group_id:'',
					factory_sn: localStorage.getItem('factory_sn')
				},
				upDownFormRules:{
					group_remarks:[{required:true,message:'请输入备注'}]
				}
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					style_id: this.style_id,
					space_id: this.space_id,
					is_house: this.is_house,
					order_by: 'sort',
					is_sale: this.is_sale,
					level_id:this.level_id,
					is_customized:this.is_customized,
					paramter:this.paramter,
					factory_sn: localStorage.getItem('factory_sn')
				};

				if (this.style_id == 0) {
					delete data.style_id;
				}
				if (this.space_id == 0) {
					delete data.space_id;
				}
				if (this.is_house == 0) {
					delete data.is_house;
				}

				if (this.classSelect == 0) {
					data.group_id = this.selectContent;
				} else if (this.classSelect == 1) {
					data.group_sn = this.selectContent;
				} else if (this.classSelect == 2) {
					data.keyword = this.selectContent;
				}

				this.$http(this.$ptApiList.GroupList, data).then(res => {
					this.goodsList = [];
					res.datas.list.forEach(item => {
						this.goodsList.push(item);
					});
					this.total = res.datas.count;
				});
			},
			postSort(sort, group_id) {
				if (sort < 0 || sort === "") {
					this.$layer.msg('请输入正确的排序');
					return
				}
				let data = {
					sort: sort,
					group_id: group_id
				}
				this.$http(this.$ptApiList.UpSortGroup, data).then(res => {
					this.init(this.page)
				});
			},
			setSort(type, sort, group_id) {
				if (type === 0) sort++
				if (type === 1 && sort === 0) {
					this.$layer.msg('不能再降序了');
					return
				}
				if (type === 1 && sort != 0) sort--
				let data = {
					sort: sort,
					group_id: group_id,
					factory_sn: localStorage.getItem('factory_sn')
				}
				this.$http(this.$ptApiList.UpSortGroup, data).then(res => {
					this.init(this.page)
				});
			},
			// 上下架
			upDown(type, e, id) {
				let data;
				if (type == 0) {
					this.upDownForm.group_id = id;
					this.upDownForm.is_sale = e
					data = {
						group_id: id,
						is_sale: e
					};
					if(e == 2){
						this.remarkDialogVisible = true
					}else if(e == 1){
						this.$http(this.$ptApiList.GroupDown, data).then(res => {
							this.$layer.msg('操作成功');
							this.init(this.page);
						})
					}
				} else if (type == 1) {
					if (this.multipleSelection.length == 0) {
						return this.$layer.msg('至少选择一个套餐进行操作');
					}
					data = {
						group_id: '',
						is_sale: 1,
						factory_sn: localStorage.getItem('factory_sn')
					};
					let arr = []
					this.multipleSelection.forEach(item => {
						arr.push(item.group_id)
					});
					this.upDownForm.is_sale = 1;
					this.upDownForm.group_id = arr.join(',')
					data.group_id = arr.join(',')
					if(e == 2){
						this.remarkDialogVisible = true
					}else if(e == 1){
						this.$http(this.$ptApiList.GroupDown, data).then(res => {
							this.$layer.msg('操作成功');
							this.init(this.page);
						})
					}
				} else if (type == 2) {
					if (this.multipleSelection.length == 0) {
						return this.$layer.msg('至少选择一个套餐进行操作');
					}
					data = {
						group_id: '',
						is_sale: 2,
						factory_sn: localStorage.getItem('factory_sn')
					};
					let arr = []
					this.multipleSelection.forEach(item => {
						arr.push(item.group_id)
					});
					data.group_id = arr.join(',')
					this.upDownForm.is_sale = 2;
					this.upDownForm.group_id = arr.join(',')
					if(e == 2){
						this.remarkDialogVisible = true
					}else if(e == 1){
						this.$http(this.$ptApiList.GroupDown, data).then(res => {
							this.$layer.msg('操作成功');
							this.init(this.page);
						})
					}
				}
			},
			refreshPage() {
				this.classSelect = 0;
				this.selectContent = '';
				this.init()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			del(type, id) {
				//type 0单个删除 1	批量删除
				let data;
				if (type == 0) {
					data = {
						group_id: id,
						factory_sn: localStorage.getItem('factory_sn')
					};
				} else if (type == 1) {
					let arr = []
					if (this.multipleSelection.length == 0) {
						return this.$layer.msg('至少选择一个套餐进行操作')
					}
					this.multipleSelection.forEach(item => {
						arr.push(item.group_id)
					});
					data = {
						group_id: arr.join(','),
						factory_sn: localStorage.getItem('factory_sn')
					}
				}
				this.$confirm('确定删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http(this.$ptApiList.DeleteGroup, data).then(res => {
						this.$layer.msg('删除成功');
						this.init();
					})
				}).catch(() => {

				})
			},
			// 套餐详情
			edit_package(is_house, group_id,is_examine) {
				if (is_examine == 1) {
					this.$layer.msg('该套餐在审核中，禁止重复修改');
					return;
				}
				this.$router.push({
					path: '/edit_package',
					query: {
						group_id: group_id
					}
				});
			},
			getGoodsList(type) {
				this.goodsListType = type;
				this.refreshPage();
			},
			getClass() {
				this.$http(this.$ptApiList.StyleList, {
					limit: 100
				}).then(res => {
					this.styleList = res.datas
					this.styleList.unshift({
						style_id: 0,
						style_name: '全部风格'
					})
				})

				this.$http(this.$ptApiList.SpaceList, {
					limit: 100
				}).then(res => {
					this.spaceList = res.datas
					this.spaceList.unshift({
						space_id: 0,
						space_name: '全部空间'
					})
				})
				this.$http(this.$ApiList.GroupLabel,{
					limit:100
				}).then(res=>{
					this.levelList = res.datas;
					this.levelList.unshift({
						label_name:"全部套餐",
						level_id:''
					})
				})
			},
			getQrCode(group_id) {
				this.$message({
					message: '生成中',
					type: 'warning'
				});
				this.$http(this.$ApiList.GetGroupQrCode, {
					group_id: group_id
				}).then(res => {
					this.qrCodeUrl = res.datas
					this.qrQialog = true
					this.$message({
						message: '生成成功',
						type: 'success'
					});
				});
			},
			exportExcel(group_id){
				window.open(`${this.$domain}furniture/Adminexcel/GroupOfferGetData?group_id=`+group_id)
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			submitUpDowmForm(formName){
				 this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$http(this.$ptApiList.GroupDown, this.upDownForm).then(res => {
							this.onCloseRemark();
							this.$layer.msg('操作成功');
							this.init(this.page);
						})
					}
				});
			},
			onCloseRemark(){
				this.remarkDialogVisible = false;
				this.upDownForm.group_remarks = '';
			},
			setSelectValue(obj){
				const { value,type } = obj
				switch (type) {
					case 'is_sale':
						this.is_sale = value
						break;
					case 'is_house':
						this.is_house = value
						break;
					case 'style_id':
						this.style_id = value
						break;
					case 'space_id':
						this.space_id = value
						break;
					case 'level_id':
						this.level_id = value
						break;
					case 'is_customized':
						this.is_customized = value
						break;
					case 'paramter':
						this.paramter = value
						break;
					default:
						break;
				}
				this.init()
			}
		},
		created() {
			if(this.admin_id==3){
				this.is_house = 3
			}
			this.init();
			this.getClass()
		}
	};
</script>
<style>
	.btn-group {
		display: flex;
		margin-top: 10px;
	}

	.btn-group .btn-item {
		margin-right: 10px;
	}

	.user-info .el-avatar {
		display: block;
		margin: 0 auto;
	}

	.info-exhibition {
		margin-top: 20px;
	}

	.info-exhibition p {
		text-align: center;
		line-height: 30px;
	}
</style>
